<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">{{textName}}智慧监控运维平台</div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="帐户" @keyup.enter.native="submitForm('ruleForm')">
						<template slot="prepend">
							<i class="el-icon-lx-people"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="密码" v-model="ruleForm.password"
						@keyup.enter.native="submitForm('ruleForm')">
						<template slot="prepend">
							<i class="el-icon-lx-lock"></i>
						</template>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm('ruleForm')" :disabled="btnLoginDisabled">
						{{ loginBtnText }}
					</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import config from '../../../public/config.js';
	import {
		Login
	} from "../../api/index";
	// import { Login } from "@/utils/login.js";
	const crypto = require("crypto");
	import {
		indexedDb,
		getUserData
	} from "@/utils/IndexedDB.js";
	import {
		type
	} from "os";
	import {
		dynamic_routes
	} from "@/router/dynamic_routes.js";
	import router from "@/router/index.js";
	import moment from "moment";
	import {
		clearCache
	} from "@/utils/clearCache.js";
	// import { setToken } from '@/utils/auth'

	export default {
		created() {
			//清理缓存
			clearCache();
		},
		data: function() {
			var validateUsername = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入帐户"));
				} else {
					callback();
				}
			};
			var validatePassword = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					callback();
				}
			};
			return {
				textName:config.textName,
				loginBtnText: "登录",
				btnLoginDisabled: false,
				ruleForm: {
					username: "",
					password: "",
				},
				rules: {
					username: [{
						validator: validateUsername,
						trigger: "blur"
					}],
					password: [{
						validator: validatePassword,
						trigger: "blur"
					}],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loginBtnText = "登录中...";
						this.btnLoginDisabled = true;
						this.submitLogin();
					} else {
						return false;
					}
				});
			},
			submitLogin() {
				if (Number(localStorage.getItem("userTime")) < 0) {
					this.loginBtnText = "登录";
					this.btnLoginDisabled = false;
				}

				Login(this.ruleForm)
					.then((res) => {
						console.log(123,res)
						if (
							res != "Wrong account or password" &&
							res != "not enough time left"
						) {
							let userType = "";
							let user = res[0].rk;
							let roleType = "";
							switch (res[0].pw) {
								case 0:
									userType = "superAdmin"; //超管
									roleType = "superAdmin";
									break;
								case 1:
									if (user == 0) {
										userType = "Badmin"; //数据库
										roleType = "admin";
									} else {
										userType = "Buser"; //数据库
									}
									// userType='Buser' //数据库
									break;
								case 2:
									if (user == 0) {
										userType = "Sadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "Suser"; //数据库
									}
									// userType='Suser' //服务器
									break;
								case 3:
									if (user == 0) {
										userType = "Nadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "Nuser"; //数据库
									}
									// userType='Nuser'  //网络
									break;
								case 12:
									if (user == 0) {
										userType = "BSadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "BSuser"; //数据库
									}
									// userType='BSuser' //数据库 服务器
									break;
								case 13:
									if (user == 0) {
										userType = "BNadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "BNuser"; //数据库
									}
									// userType='BNuser' //数据库 网络
									break;
								case 23:
									if (user == 0) {
										userType = "SNadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "SNuser"; //数据库
									}
									// userType='SNuser'  //服务器 网络
									break;
								case 123:
									if (user == 0) {
										userType = "bigadmin"; //数据库
										roleType = "admin";
									} else {
										userType = "bigUser"; //数据库
									}
									// userType='bigUser'  //服务器 数据库 网络
									break;
							}
							//设陷阱
							localStorage.setItem("ms_username", res[0].un);
							localStorage.setItem("ms_name", res[0].un);
							localStorage.setItem("ms_create_date", res[0].ct);
							localStorage.setItem("ms_id", "000");
							localStorage.setItem(
								"ms_role",
								res[0].pw == 0 ?
								"超级管理员" :
								res[0].pw == 10 ?
								"管理员" :
								"普通用户"
							);
							localStorage.setItem("ms_type", userType);
							indexedDb(
								"userBase",
								[{
									id: 0,
									ms_type: userType,
									login: "login",
									endTime: res[0].et,
									ms_username: res[0].un,
									ms_password: this.ruleForm.password,
									power: res[0].pw,
									creteTime: res[0].ct,
									icd: res[0].icd,
									userAuthority: res[0].rk,
									roleType: roleType,
									userType,
								}, ],
								"infoBase",
								"id"
							);
							localStorage.setItem(
								"ms_lastTime",
								moment()
								.clone()
								.add(600, "m")
								.format("YYYY/MM/DD HH:mm:ss")
							);

							this.$store.commit("time/setEndTime", res[0].et);
							this.$store.commit("time/setUserInfo", res[0]);
							this.$message.success({
								message: "登陆成功",
								type: "success",
								duration: 1000,
							});

							this.$router.push("/dashBoard/MainPage");
						} else if (res == "not enough time left") {
							this.$message.warning("试用期结束,请联系超管");

							this.loginBtnText = "登录";
							this.btnLoginDisabled = false;
						} else {
							this.$message.error("用户名或密码错误,登陆失败");
							this.loginBtnText = "登录";
							this.btnLoginDisabled = false;
						}
					})
					.catch((err) => {
						if (
							err ==
							"TypeError: Cannot read properties of undefined (reading '0')"
						) {
							this.$message.error("服务器已宕机,请稍后重试");
							setTimeout((_) => {
								this.loginBtnText = "登录";
								this.btnLoginDisabled = false;
							}, 3000);
						} else {
							this.$message.error(err);
						}
					});
			},
		},
	};
</script>

<style scoped>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.jpg);
		background-size: 100% 100%;
	}

	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #edeef0;
		border-bottom: 1px solid #ddd;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		overflow: hidden;
	}

	.ms-content {
		padding: 30px 30px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
</style>
